<template>
  <div>
    <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="isLoading">
      <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="doctorList.length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../assets/空两本书.png')"
      description="暂无我的授权"
    />
    <div class="box"
         @click.stop="doctorInfo(item)"
         v-for="(item, index) in doctorList" :key="index">
      <div class="box_left">
        <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
        <img  v-else-if="Number(item.SEX) == 1" src="../../assets/男医生@2x.png" class="PHOTO" alt="">
        <img  v-else-if="Number( item.SEX )== 2" src="../../assets/女医生@2x.png" class="PHOTO" alt="">
      </div>
      <div class="box_right">
        <ul>
          <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
            </span>
          </li>
          <li>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
            <span>&nbsp;|&nbsp;</span>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
          </li>
          <li>
            <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
            <button class="biaoqian">{{item.GRADE}}</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DoctorList',
  data () {
    return {
      userid: this.$route.query.userid,
      oauth_data_user_id: this.$route.query.oauth_data_user_id, // 授权的用户的userid
      doctorList: [],
      isLoading: true,
      fromPath: '',
      team_amount_id: this.$route.query.team_amount_id, // 团队项目的id
      team_id: this.$route.query.team_id // 团队的id
    }
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.fromPath = to
    })
  },
  mounted () {
    this.getDoctorList()
  },
  methods: {
    // 点击医生事件
    doctorInfo (item) {
      let query = this.fromPath.query
      query.doc_user_id = item.USER_ID
      if (this.team_amount_id) {
        this.$router.push({
          path: '/PatientsTable',
          query: query
        })
      }
    },
    // 获取医生列表
    getDoctorList () {
      this.isLoading = true
      let team_amount_id = ''
      let team_id = ''
      let oauth_data_user_id = ''
      if (this.oauth_data_user_id) {
        oauth_data_user_id = this.oauth_data_user_id
      }
      if (this.team_amount_id) {
        team_amount_id = this.team_amount_id
      }
      if (this.team_id) {
        team_id = this.team_id
      }
      this.$http.findDoctor({oauth_data_user_id: oauth_data_user_id,
        team_amount_id: team_amount_id,
        team_id: team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doctorList = res.data.data
            this.isLoading = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    }
  }
}
</script>

<style scoped>
.box1{
  width: 95%;
  margin: 8px auto;
  display: flex;
  padding: 5px;
  box-sizing: border-box;
  background: white;
  border-radius: 10px;
}
.box{
  padding: 10px;
  box-sizing: border-box;
  background: white;
  margin-bottom: 8px;
  display: flex;
}
.box_left{
  width: 23%;
  display: flex;
  align-items: center;
  flex-direction: column;
  /*justify-content: space-between;*/
}
.box_right{
  width: 78%;
}
.box_right ul{
  /*height: 60px;*/
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}
.box_right ul li{
  height: 25px;
  display: flex;
  align-items: center;
}
.box_right ul li:nth-child(1){
  justify-content: space-between;
}
.name{
  font-size: 15px;
  font-family: PingFang SC;
  color: #333333;
}
.biaoqian{
  /*padding: 0px 8px;*/
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background: rgba(29, 164, 242, 0.1); */
  background: transparent;
  color: #1DA4F2;
  /* border: none; */
  border: 1px solid;
  font-size: 11px;
  margin-left: 8px;
}
{
  color: white;
  background: #1DA4F2;
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 11px;
}
.biaoqian,
.jieShao
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jieShao{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 8px;
}
.selectImg{
  width: 11px;
  height: 7px;
}
.PHOTO{
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
</style>
